import React from 'react';

interface PaginationProps {
  currentPage: number;
  totalItems: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  onItemsPerPageChange: (itemsPerPage: number) => void;
}

const Pagination: React.FC<PaginationProps> = ({
  currentPage,
  totalItems,
  itemsPerPage,
  onPageChange,
  onItemsPerPageChange
}) => {
  // 计算总页数
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  
  // 计算显示范围
  const startItem = (currentPage - 1) * itemsPerPage + 1;
  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
  
  // 生成页码数组
  const generatePageNumbers = () => {
    const pageNumbers: (number | string)[] = [];
    
    // 简化版本：总是显示首页、末页和当前页附近的几个页码
    // 如果总页数很少，直接显示所有页码
    if (totalPages <= 7) {
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      // 显示首页
      pageNumbers.push(1);
      
      // 如果当前页离首页较远，显示省略号
      if (currentPage > 4) {
        pageNumbers.push('...');
      }
      
      // 显示当前页附近的页码
      const startRange = Math.max(2, currentPage - 2);
      const endRange = Math.min(totalPages - 1, currentPage + 2);
      
      for (let i = startRange; i <= endRange; i++) {
        pageNumbers.push(i);
      }
      
      // 如果当前页离末页较远，显示省略号
      if (currentPage < totalPages - 3) {
        pageNumbers.push('...');
      }
      
      // 显示末页
      pageNumbers.push(totalPages);
    }
    
    return pageNumbers;
  };
  
  // 处理页码点击
  const handlePageClick = (page: number) => {
    if (page >= 1 && page <= totalPages && page !== currentPage) {
      onPageChange(page);
    }
  };
  
  // 处理每页显示条数变化
  const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newItemsPerPage = parseInt(e.target.value);
    onItemsPerPageChange(newItemsPerPage);
  };
  
  return (
    <div className="pagination-container">
      <div className="pagination-info">
        <span>显示 {startItem} 至 {endItem} 条，共 {totalItems} 条</span>
      </div>
      
      <div className="pagination-controls">
        <div className="pagination-buttons">
          <button
            className="pagination-btn"
            onClick={() => handlePageClick(1)}
            disabled={currentPage === 1}
            title="首页"
          >
            首页
          </button>
          <button
            className="pagination-btn"
            onClick={() => handlePageClick(currentPage - 1)}
            disabled={currentPage === 1}
            title="上一页"
          >
            上一页
          </button>
          
          {generatePageNumbers().map((item, index) => (
            <React.Fragment key={index}>
              {item === '...' ? (
                <span className="pagination-ellipsis">...</span>
              ) : (
                <button
                  className={`pagination-btn ${item === currentPage ? 'active' : ''}`}
                  onClick={() => handlePageClick(item as number)}
                >
                  {item}
                </button>
              )}
            </React.Fragment>
          ))}
          
          <button
            className="pagination-btn"
            onClick={() => handlePageClick(currentPage + 1)}
            disabled={currentPage === totalPages}
            title="下一页"
          >
            下一页
          </button>
          <button
            className="pagination-btn"
            onClick={() => handlePageClick(totalPages)}
            disabled={currentPage === totalPages}
            title="末页"
          >
            末页
          </button>
        </div>
        
        <div className="items-per-page">
          <label htmlFor="itemsPerPage">每页显示：</label>
          <select
            id="itemsPerPage"
            value={itemsPerPage}
            onChange={handleItemsPerPageChange}
            className="items-per-page-select"
          >
            <option value={10}>10条</option>
            <option value={20}>20条</option>
            <option value={50}>50条</option>
            <option value={100}>100条</option>
          </select>
        </div>
      </div>
    </div>
  );
};

export default Pagination;